<template>
  <div v-for="(item, index) in el.list_ref2.value" class="box">
    {{ item.a }}
  </div>
  <div class="box">
    {{ a }}
  </div>
  <div>
    <button @click="add">添加</button>
    <button @click="reset">重置</button>
  </div>
</template>
<script>
import { toRef, markRaw, ref } from 'vue'
import Element from './class/toref_test.js'
export default {
  data() {
    return {
      el: markRaw(new Element()),
      list: [],
      a: 0
    }
  },
  methods: {
    add() {
      this.el.add({
        a: 1,
        b: 2
      })

      this.abc.a = +new Date()
      console.log(this.abc.a, this.a)
    },
    reset() {
      this.el.reset()
    }
  },
  mounted() {
    this.abc = {
      a: 1,
      b: 2
    }

    let a = toRef(this.abc, 'a')
    this.a = a

    let obj = {
      a: 1,
      b: 2
    }
    let obj_ref = ref(obj)
    obj_ref.value = {
      a: 3,
      b: 4
    }
    console.log(obj_ref, obj)
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
